
function Canvas(){
	this.init.apply(this,arguments);
}
Canvas.prototype={
	//存储当前表面状态数组-上一步
	preDrawAry:[],
	//存储当前表面状态数组-下一步
	nextDrawAry:[],
	//配置参数
	confing:{
		lineWidth:1,
		lineColor:"#7ecef4",
		shadowBlur:0.2
	},
	init:function(oCanvas,oColor,oBrush,oControl,oPic){
		this.saveSrc = "";
		this.canvas=oCanvas;
		this.context=oCanvas.getContext('2d');
		this.colorDiv=oColor;
		this.brushDiv=oBrush;
		this.controlDiv=oControl;
		this.pic = oPic;
		this.w = this.canvas.offsetWidth
		this.h = this.canvas.offsetHeight
		this.canvas.width = this.w
		this.canvas.height = this.h
		this._initDraw();
		this._draw(oCanvas);
		this.setColor();
		this.checkColor();
		this.setBrush();
		this.preClick();
		this.nextClick();
		this.clearClick();
		this.drawImage();
		// this._isDraw();	
		
	},
	_initDraw:function(){
		var _this = this
		_this.preDrawAry=[];
		_this.nextDrawAry=[];
		var preData=_this.context.getImageData(0,0,_this.w,_this.h);
		//空绘图表面进栈
		_this.preDrawAry.push(preData);
			
	},
	//涂鸦主程序 
	_draw:function(oCanvas){
		var _this=this;
		var img_float = $('.save-eare .float-bg')[0];
		var save_eare = $('.save-eare')[0];

		save_eare.addEventListener("touchstart",function(e){
			var x=e.changedTouches[0].clientX,
			y=e.changedTouches[0].clientY,
			left=img_float.offsetLeft+10,
			top=img_float.offsetTop+140,
			canvasX=x-left,
			canvasY=y-top;
			_this._setCanvasStyle();
			//清除子路径
			_this.context.beginPath();
			_this.context.moveTo(canvasX,canvasY);
			//当前绘图表面状态
			var preData=_this.context.getImageData(0,0,_this.w,_this.h);
			//当前绘图表面进栈
			// _this.preDrawAry.push(preData);
			// console.log("...start")
			e.preventDefault()
			
		}) 
		save_eare.addEventListener("touchmove",function(e){
			
			var x2=e.changedTouches[0].clientX,
				y2=e.changedTouches[0].clientY,
				t=e.target,
				left=img_float.offsetLeft+10,
				top=img_float.offsetTop+140,
				canvasX2=x2-left,
				canvasY2=y2-top;
			
			if(t==img_float){
				_this.context.lineTo(canvasX2,canvasY2);
				_this.context.stroke();
			}else{
				_this.context.beginPath();
			}
			// console.log(".........move")
			
		}) 
			
		save_eare.addEventListener("touchend",function(e){
				var t=e.target;
				
				if(t==img_float){
					//当前绘图表面状态
					var preData=_this.context.getImageData(0,0,_this.w,_this.h);
					_this.preDrawAry.push(preData);
					// _this._isDraw();	
				}
				this.onmousemove=null;	
			// console.log(_this.preDrawAry)
			// console.log("....end")
			
			}) 
	},
	//设置画笔
	_setCanvasStyle:function(){
		this.context.lineWidth=this.confing.lineWidth;
		this.context.shadowBlur=this.confing.shadowBlur;
		this.context.shadowColor=this.confing.lineColor;
		this.context.strokeStyle=this.confing.lineColor;
	},
	//设置颜色
	setColor:function(){
		this.colorDiv.onclick=this.bind(this,this._setColor);
	},
	_setColor:function(e){
		
		var t=e.target;
		if(t.className.indexOf('color-item')>=0){
			// this.confing.lineColor=t.style.backgroundColor;
			// document.getElementsByClassName("the-color")[0].style.backgroundColor = t.style.backgroundColor
			$('.color-board div').removeClass('checked')
			$(t).addClass('checked')
		}else{
			e.preventDefault();
		}         
	},
	checkColor:function(){
		this.confing.lineColor ="#7ecef4"
		document.getElementsByClassName("yes-no")[0].onclick=this.bind(this,this._checkColor);
		
	},
	_checkColor:function(e){
		var t = e.target;
		if(t.innerText == "OK"){
			this.confing.lineColor=$("li .checked")[0].style.backgroundColor;
			document.getElementsByClassName("the-color")[0].style.backgroundColor = $("li .checked")[0].style.backgroundColor;
			$(".pen div.activePen")[0].style.backgroundColor = $("li .checked")[0].style.backgroundColor;
			
		}else if (t.innerText == "CANCEL"){
			if($('.color-board div')[0].style.backgroundColor == "his.confing.lineColor"){
				$('.color-board div').removeClass('checked');
				$(this).addClass('checked');
			}
		}
	},
	//设置画笔大小
	setBrush:function(){
		this.confing.lineWidth = 2;
		$('.pen div.activePen')[0].style.backgroundColor = document.getElementsByClassName("the-color")[0].style.backgroundColor;
		this.brushDiv.onclick=this.bind(this,this._setBrush);
	},
	_setBrush:function(e){
		var t=e.target;
		if(t.className.indexOf("s")>=0){
			if(t.className.indexOf("s1")>=0){
				this.confing.lineWidth=2;
			}else if(t.className.indexOf("s2")>=0){
				this.confing.lineWidth=4;
			}else if(t.className.indexOf("s3")>=0){
				this.confing.lineWidth=6;
			}else if(t.className.indexOf("s4")>=0){
				this.confing.lineWidth=8;
			}else if(t.className.indexOf("s5")>=0){
				this.confing.lineWidth=10;
			}
			var that = this;
			$('.pen div').removeClass("activePen")
			$(t).addClass("activePen")
			var nodeLists = $('.pen div')
			for(var i=0;i<nodeLists.length;i++){
				nodeLists[i].style.backgroundColor = "#4c4186";
			}
			$('.pen div.activePen')[0].style.backgroundColor = document.getElementsByClassName("the-color")[0].style.backgroundColor;
		}else{
			e.preventDefault();
		}

	},
	//判断是否已涂鸦,修改按钮状态
	_isDraw:function(){
		if(!this.preDrawAry.length){
			// $('.return-control').addClass('js-return-control');
			// $('.return-control').removeClass('return-control');
			// $('.empty-control').addClass('js-empty-control');
			// $('.empty-control').removeClass('empty-control');
		}else{
			// $('.col img')[1].style.backgroundColor = "#aaa"	
		}
	},

	//点击上一步-改变涂鸦当前状态
	preClick:function(){
		var pre=this.controlDiv.getElementsByTagName("div")[1];
		pre.onclick=this.bind(this,this._preClick);
	},

	_preClick:function(){
		if(this.preDrawAry.length>1){ 
			var popData=this.preDrawAry.pop();
			var lastData;
			this.nextDrawAry.push(popData);
			
			if(this.preDrawAry.length>0){
				lastData = this.preDrawAry[this.preDrawAry.length-1];
				this.context.putImageData(lastData,0,0)
			}
			// console.log("上一步")
			// console.log('preDrawAry:'+this.preDrawAry)
		}else{
			return true;
		}
	},

	//点击下一步-改变涂鸦当前状态
	nextClick:function(){
		var next=this.controlDiv.getElementsByTagName("div")[2];
		next.onclick=this.bind(this,this._nextClick);
	},
	_nextClick:function(){
		if(this.nextDrawAry.length){
			var popData=this.nextDrawAry.pop();
			this.preDrawAry.push(popData);
			this.context.putImageData(popData,0,0)
			// console.log("下一步")
			// console.log("nextDrawAry:"+this.nextDrawAry)
		}else{
			return true;
		}
	},

	//清空
	clearClick:function(){
		var clear=this.controlDiv.getElementsByTagName("div")[3];
		clear.onclick=this.bind(this,this._clearClick);
	},
	_clearClick:function(){
		this.context.clearRect(0,0,this.context.canvas.width,this.context.canvas.height);
		this._initDraw();
		// console.log('preDrawAry:'+this.preDrawAry)
		// console.log('nextDrawAry:'+this.nextDrawAry)
	},
	//生成图像
	drawImage:function(){
		var btn=this.controlDiv.getElementsByTagName("div")[0];
		btn.onclick=this.bind(this,this._drawImage);
	},
	_drawImage:function(e){
		var _this = this;
		var saveEare = $(".save-eare")[0]
		html2canvas(saveEare, {
			allowTaint: true,
			tainTest: false,
			width: _this.w,
			height:_this.h,
			onrendered: function(canvas) {
				var dataUrl = canvas.toDataURL('image/png');
				_this.saveSrc = dataUrl;
				
				var newImg = new Image()
				newImg.src = dataUrl;
				// console.log(newImg)
			}
		})
		// console.log("clicked save button!")
	},
	bind:function(obj,handler){
		return function(){
			return handler.apply(obj,arguments);	
		}
	}
}

